<template>
<div class="headerMain">
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    style="height: 60%; width:100%;overflow: hidden;"
  >
    <el-menu-item index="0">
      <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="">
    </el-menu-item>
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">沸点</el-menu-item>
    <el-menu-item index="3">课程</el-menu-item>
    <el-menu-item index="4">直播</el-menu-item>
    <el-menu-item index="5">活动</el-menu-item>
    <el-menu-item index="6">商城</el-menu-item>
      <div class="flex-grow" />
     <el-menu-item class="one" style="height: 50%;margin: auto 0">
    <el-input
      v-model="input3"
      placeholder="探索稀土掘金"
      class="input-with-select"
    >
      <template #append>
      <el-icon class="Search" style="vertical-align: middle;">
		<Search />
	</el-icon>		
      </template>
    </el-input>
     </el-menu-item>
     <!-- <el-menu-item class="one"><el-button type="primary" size="large">创作者中心</el-button></el-menu-item> -->
     <el-dropdown size="default" split-button type="primary" @click="handleClick" style="margin-top: 18px">
      创作者中心
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-icon class="EditPen" style="vertical-align: middle;" size="large>
            <EditPen />
            </el-icon><span style="width:20px">写文章</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-icon class="EditPen" style="vertical-align: middle;">
            <EditPen />
            </el-icon><span style="width:20px">写文章</span>
          </el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item>Action 4</el-dropdown-item>
          <el-dropdown-item>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
     <el-menu-item class="one"><img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/24127194d5b158d7eaf8f09a256c5d01.svg" alt=""><span>会员</span></el-menu-item>
     <el-menu-item class="one"><el-avatar> user </el-avatar></el-menu-item>
    </el-menu>
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    style="height: 40%;overflow: hidden;"
  >
    <el-menu-item index="0">综合</el-menu-item>
    <el-menu-item index="1">关注</el-menu-item>
    <el-menu-item index="2">后端</el-menu-item>
    <el-menu-item index="3">前端</el-menu-item>
    <el-menu-item index="4">Android</el-menu-item>
    <el-menu-item index="5">iOS</el-menu-item>
    <el-menu-item index="6">人工智能</el-menu-item>
    <el-menu-item index="7">开发工具</el-menu-item>
    <el-menu-item index="8">代码人生</el-menu-item>
    <el-menu-item index="9">阅读</el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1">标签管理</el-menu-item>
  </el-menu>
</div>
  
</template>

<script>
import { Search } from '@element-plus/icons-vue'
export default {

}
</script>

<style scoped>
div {
  height: 100%;
}
.flex-grow {
  flex-grow: 1;
}
.el-menu--horizontal >>> .el-menu-item {
  height: 100%;
}

li.el-menu-item.is-active.one {
    border-bottom: 0px;
    text-decoration: none;
}
div.el-input-group__append {
  padding: 1px 20px;
}
.headerMain {
  width: 100%;
}
ul.el-menu.el-menu--horizontal.el-menu-demo {
  width: 100%;
}
.el-submenu__title:hover{
   background-color: #fff !important; 
}
.el-menu-item:hover {
  background-color: #fff !important;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>